<!-- 投诉记录 -->
<template>
	<view class="list">
		<view class="content" v-for="({ plate,type,complaintContent,status,createTime,id},i) in list" :key="i"
			v-if="list.length>0">
			<view class="">
				<view class="">
					{{plate}}-{{type}}
				</view>
				<view :class="[status==0&&'defuleStatus'||status==1&&'status'||status==2&&'defuleStatus' ] ">
					<!--  0未受理 1受理中 2已结案" -->
					{{status==0&&'未受理'||status==1&&'受理中'||status==2&&'已结案'}}
				</view>
			</view>
			<view class="">
				{{complaintContent}}
			</view>
			<view class="">
			</view>
			<view class="">
				<view class=""> 发起时间：{{createTime.substring(5,16)}}
				</view>
				<view class="" @click="toDetail(id)"> 查看详情 </view>
			</view>
		</view>
		<view class="empit" v-else>
		</view>
		<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more>
	</view>
</template>
<script>
	export default ({
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 5,
				hasFlag: true,
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			toDetail(e) {
				uni.redirectTo({
					url: `/pages/tousu/boss/detail?id=${e}`
				})
			},
			async getList() {
				if (!this.hasFlag) return
				let res = await this.$fetch(this.$api.get_complaint_list, {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, 'GET')
				if (res.code) return
				this.list = [...this.list, ...res.rows, ]
				this.hasFlag = this.list.length < res.total
			},
		},
		onReachBottom() {
			this.pageNum += 1
			this.getList()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	})
</script>
<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;
		align-items: center;

		.content {
			width: 694rpx;
			height: 352rpx;
			background: #FFF;
			border-radius: 24rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;

			&>view:nth-child(1) {
				width: 654rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 36rpx auto 0;

				&>view:first-child {
					font-size: 36rpx;
					font-weight: bold;
					color: #262626;
				}

				&>view:last-child {
					font-size: 28rpx;
				}

				.status {
					color: #FF851D;
				}

				.defuleStatus {
					color: #7F7F7F;
				}
			}

			&>view:nth-child(2) {
				width: 654rpx;
				margin: 24rpx auto 0;
				font-size: 28rpx;
				font-weight: 400;
				color: #515151;
				height: 80rpx;
				overflow: scroll;
				word-wrap: break-word;
			}

			&>view:nth-child(3) {
				width: 654rpx;
				margin: 30rpx auto;
				border-bottom: 2rpx dashed #F1F1F5;
			}

			&>view:nth-child(4) {
				width: 654rpx;
				align-items: center;
				margin: 0 auto;
				align-self: flex-end;
				display: flex;
				justify-content: space-between;

				&>view:first-child {
					font-size: 24rpx;
					font-weight: 400;
					color: #7F7F7F;
				}

				&>view:last-child {
					width: 160rpx;
					height: 60rpx;
					border-radius: 6rpx;
					opacity: 1;
					border: 2rpx solid #7F7F7F;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}
	}

	.empit {
		width: 414rpx;
		height: 280rpx;
		background: url('../../../static/icon3/grow/empit.png') center center/cover no-repeat;
		margin: 496rpx auto;
	}
</style>